{extend name="public:base" /}
{block name="action"}
<button type="button" class="btn btn-w-m btn-primary cc" data-toggle="modal" data-target="#add-form"><i
        class="fa fa-plus"></i>添加
</button>
<a type="button" class="btn btn-w-m btn-primary"
   href="{:url('dc')}">  导出
</a>
{/block}
{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight" xmlns="http://www.w3.org/1999/html">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <form method="get">
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="input-group">
                                    <input placeholder="输入职位名称搜索" value="{$params['query']}" name="query" type="text"
                                           class="form-control form-control-sm">
                                    <div class="input-group-append">
                                        <button type="submit" class="btn btn-sm btn-primary"><i
                                                class="fa fa-search"></i>搜索
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="ibox-content">

                    <div class="table-responsive">
                        <table class="table table-striped datalist-table">
                            <thead>
                            <tr>
                                <th>名称</th>
                                <th>描述</th>
                                <th>审批人</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {notempty name="list"}
                            {volist name="list" id="vo"}
                            <tr>
                                <td>{$vo.name}</td>
                                <td>{$vo.describe}</td>
                                <td>{$vo.is_approver==2?"是":"否"}</td>
                                <td class="project-actions">
                                    <button class="btn btn-warning btn-sm edit-btn" data-id="{$vo.id}">
                                        <i class="fa fa-edit ajax-edit"></i> 编辑
                                    </button>
                                    <a href="{:url('delete', ['id' => $vo['id']])}"
                                       class="btn btn-danger btn-sm ajax-del"><i class="fa fa-trash-o"></i> 删除 </a>
                                </td>
                            </tr>
                            {/volist}
                            {/notempty}
                            </tbody>
                        </table>
                        {$list->render()}
                    </div>
                </div>
            </div>
            <div id="add-form" class="modal fade" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    <h3 class="m-t-none m-b position-title">职位信息</h3>
                                    <form role="form" action="{:url('save')}" id="position-form">
                                        <input type="hidden" name="id">
                                        <div class="form-group">
                                            <label>审核人：</label>
                                            <div class="radio i-checks">
                                                <label>
                                                    <input type="radio" name="is_approver" value="2" checked="checked">
                                                    <i></i> 是 </label>
                                                <label>
                                                    <input type="radio" name="is_approver" value="1">
                                                    <i></i> 否 </label>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label>职位名称：</label>
                                            <input type="text" name="name" autocomplete="off" placeholder="请输入职位名称"
                                                   class="form-control">
                                        </div>
                                        <div class="form-group">
                                            <label>职位描述：</label>
                                            <textarea class="form-control message-input" name="describe"
                                                      placeholder="请输入职位描述"></textarea>
                                        </div>
                                        <div>
                                            <button class="btn btn-sm btn-primary float-right m-t-n-xs" type="submit">
                                                <strong>确定</strong>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script type="text/javascript">
    $(document).ready(function () {
        $(".datalist-table").on("click", ".edit-btn", function (e) {
            loadingDetail($(e.currentTarget).data("id")).then(data => {
                $("#add-form").find("input[name='id']").val(data.data.id);
                $("#add-form").find("input[name='name']").val(data.data.name);
                $("#add-form").find("textarea[name='describe']").val(data.data.describe);
                $("#add-form").find("input[name='is_approver'][value='" + data.data.is_approver + "']").prop("checked", "checked");
                $("#add-form").modal("show");
            });
        })
        $('.cc').click(function(){
            $("input[ name='id'] ").val("");
        })
        function loadingDetail(id) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: "{:url('show')}?id=" + id,
                    type: "get",
                    dataType: "json",
                    success: function (res) {
                        resolve(res);
                    },
                    error: function (err) {
                        reject(err);
                    }
                });
            })
        }

        $("#position-form").validate({
            rules: {
                name: {
                    required: true,
                    minlength: 2,
                    maxlength: 20
                }
            },
            messages: {
                name: {
                    required: " 请输入职位名称",
                    minlength: "职位名称最少2个字",
                    maxlength: "职位名称最多20个字"
                }
            },
            submitHandler: function (form, data, last) {
                let postData = {
                    name: $("input[name='name']").val(),
                    describe: $("textarea[name='describe']").val(),
                    is_approver: $("input[name='is_approver']:checked").val()
                };
                let url = "";
                if ($("input[name='id']").val() !== '') {
                    postData['id'] = $("input[name='id']").val();
                    url = "{:url('edit')}";
                    let type = "post";
                } else {
                    url = "{:url('add')}";
                }
                $.ajax({
                    url,
                    data: {...postData},
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        if (data.code === 1) {
                            toast.success(data.msg, {duration: data.wait * 1000, progressBar: true}).then(function () {
                                window.location.reload();
                            });
                        } else {
                            toast.warning(data.msg, {duration: data.wait * 1000});
                        }
                    },
                    error: function (err) {
                        toast.error("操作失败", {});
                    }
                })
                return false;
            },
        });
    });
</script>
{/block}